<template>
<div>

  <button @click="awesome = !awesome">if条件切换按钮</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</div>
  <div>
    <label>输入字母，然后回车</label>
    <input :id="typeInput" @keydown.enter="setType"/>
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
  </div>
</template>
<script setup>
  import {ref} from "vue";

  var awesome=ref(true)
  var type = ref()
  var typeInput="inputType"
  function setType() {
    alert(document.getElementById(typeInput).value)
    type.value=document.getElementById(typeInput).value
  }
</script>
